<template>
  <div class="subject-item" v-if="item">
    <h3>
      <router-link :to="`/nav?name=${item.name}`">{{ item.name }}</router-link>
    </h3>
    <router-link :to="`/nav?name=${item.name}`">
      <img :src="'https://ichf.cn' + item.image" alt=""
    /></router-link>
    <img class="prize" src="4.png" alt="" />
    <p>
      {{ item.detail }}
    </p>
  </div>
</template>

<script>
export default {
  props: ["item"],
};
</script>

<style lang="scss" scoped>
.subject-item {
  margin: 0 20px 40px;
  width: 29.2%;
  text-align: center;
  position: relative;
  a {
    text-decoration: none;
  }
  img {
    width: 100%;
    margin: 20px 0;
    height: 250px;
  }
  .prize {
    width: 48px;
    height: 48px;
    position: absolute;
    right: 7%;
    top: 12%;
  }
  h3 > a {
    font-size: 24px;
    letter-spacing: 0.5rem;
    color: #4b5563;
  }
  p {
    // 将对象作为弹性伸缩盒子模型显示
    display: -webkit-box;
    // 设置或检索伸缩盒对象的子元素的排列方式
    -webkit-box-orient: vertical;
    //  指定几行
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
}
</style>
